<template>
  <div class="content ">
    <div class="bg-fff top">
      <div class="touxiang">
        <img src="./images/tx.png">
      </div>
      <div class="change">
        更换头像
      </div>
    </div>

    <div class="mt-10 bg-fff pl-15">
      <router-link to="/update_name">
        <div class="clearfix my-line">
          <div class="fl my-16-21 ptrb">账号</div>
          <div class="fr arrow clearfix">
            <div class="fl my-16-22">
              1919191919191
            </div>
          </div>
        </div>
      </router-link>

      <router-link to="/update_name">
        <div class="clearfix my-line">
          <div class="fl my-16-21 ptrb">姓名</div>
          <div class="fr arrow clearfix">
            <div class="fl my-16-22">
              王百川
            </div>
            <div class="fl pl-10">
              <img src="./images/details-next.svg">
            </div>
          </div>
        </div>
      </router-link>

      <router-link :to="{ path: '/update_phone'}">
        <div class="clearfix my-line">
          <div class="fl my-16-21 ptrb">手机号码</div>
          <div class="fr arrow clearfix">
            <div class="fl my-16-22">
              1897778990



            </div>
            <div class="fl pl-10">
              <img src="./images/details-next.svg">
            </div>
          </div>
        </div>
      </router-link>


      <div class="clearfix" @click="openPicker">
        <div class="fl my-16-21 ptrb">出生日期</div>
        <div class="fr arrow clearfix">
          <div class="fl my-16-97">
            <input class="my-input" type="text" ref="birthday" placeholder="请选择出生日期" v-model="birthday">
          </div>
          <div class="fl pl-10">
            <img src="./images/details-next.svg">
          </div>
        </div>

      </div>


      <!--<mt-datetime-picker-->
      <!--ref="picker"-->
      <!--type="time"-->
      <!--v-model="pickerValue">-->
      <!--</mt-datetime-picker>-->
      <mt-datetime-picker v-model="pickerValue" type="date" ref="picker" year-format="{value}" month-format="{value}"
                          date-format="{value}" @confirm="handleConfirm" :startDate="startDate"
                          :endDate="endDate"></mt-datetime-picker>
    </div>

    <div class="mt-10 bg-fff pl-15">
      <router-link to="/update_pass">
        <div class="clearfix">
          <div class="fl my-16-21 ptrb">修改密码</div>
          <div class="fr arrow clearfix">
            <div class="fl pl-10">
              <img src="./images/details-next.svg">
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>


</script>

<style scoped>

  .content {
    text-align: center;
  }

  .top{
    height: 7rem;
  }
  .touxiang {
    position: relative;
    top: .5rem;
    left:calc(50% - 1.75rem);
    width: 3.5rem;
    height: 3.5rem;
  }
  .touxiang img {
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 10rem;
  }

  .change {
    position: relative;
    height: 1.4rem;
    line-height: 1.4rem;
    width: 30%;
    left: 35%;
    border-radius: 1rem;
    border:1px solid #cecece;
    color: #999;
    font-size: 0.6rem;
    margin-top: 1.25rem;
  }

  .my-input {
    text-align: right;
    color: #222222;
    background: none;
    border: 0;
  }

  .pl-10 {
    padding-left: .5rem;
  }

  .pl-15 {
    padding-left: .75rem;
  }

  .ptrb {
    padding: .75rem .75rem .75rem 0;
  }

  .arrow {
    position: absolute;
    /* padding: .75rem 0 0 .5rem; */
    padding-top: .75rem;
    right: .5rem;
    margin-right: .75rem;
  }



  .face img {
    width: 100%;
    height: 4rem;
  }

  .face input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .top-bar .title {
    background: #1b1b20;
    line-height: 2.5rem;
    color: #ffffff;
    font-size: .85rem;
  }

  .my-16-22 {
    font-size: .8rem;
    color: #333333;
  }

  .my-16-21 {
    font-size: .8rem;
    color: #777777;
  }

  .clearfix {
    clear: both;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .mt-10 {
    margin-top: .5rem;
  }

</style>
